<nz-card>
  <p class="goods-label-title">基本信息</p>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>类型</nz-form-label>
    <nz-form-control nzFlex="auto">
      <nz-radio-group nzDisabled [(ngModel)]="formParams.type">
        <label nz-radio [nzValue]="1">自定义</label>
        <label nz-radio [nzValue]="2">优惠券</label>
        <label nz-radio [nzValue]="3">直降促销</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item *ngIf="formParams.businessId">
    <nz-form-label [nzFlex]="formLabelWidth">关联ID</nz-form-label>
    <nz-form-control nzFlex="auto">
      {{ formParams.businessId || '-' }}
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>权重</nz-form-label>
    <nz-form-control nzFlex="auto">
      <nz-input-number
        style="width: 200px;"
        [nzStep]="1"
        [nzPrecision]="0"
        nzPlaceHolder="请输入"
        [nzDisabled]="setDisabled()"
        [(ngModel)]="formParams.weight"
      ></nz-input-number>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>标题</nz-form-label>
    <nz-form-control nzFlex="400px">
      <input
        nz-input
        maxlength="50"
        placeholder="请输入标题"
        [disabled]="setDisabled()"
        [(ngModel)]="formParams.name"
      />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth">备注</nz-form-label>
    <nz-form-control nzFlex="400px">
      <nz-textarea-count [nzMaxCharacterCount]="100">
        <textarea
          rows="4"
          nz-input
          maxlength="100"
          placeholder="仅内部可见"
          [disabled]="setDisabled()"
          [(ngModel)]="formParams.remark"
        ></textarea>
      </nz-textarea-count>
    </nz-form-control>
  </nz-form-item>

  <nz-divider></nz-divider>

  <p class="goods-label-title">样式设置</p>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>样式</nz-form-label>
    <nz-form-control nzFlex="400px">
      <nz-select
        nzShowSearch
        nzAllowClear
        nzPlaceHolder="请选择样式"
        [nzDisabled]="setDisabled()"
        [(ngModel)]="formParams.styleTag"
        (ngModelChange)="styleChange($event)">
        <nz-option
          *ngFor="let option of goodsStyleOptions"
          [nzLabel]="option.name"
          [nzValue]="option.content"
        ></nz-option>
      </nz-select>

      <p
        style="color: #F56C6C;"
        [hidden]="!goodsStyleTips"
        class="p-t-5">
        {{ goodsStyleTips }}
      </p>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth">参数</nz-form-label>
    <nz-form-control nzFlex="400px">
      <input
        nz-input
        placeholder="多个参数请用@分隔"
        [disabled]="setDisabled()"
        [(ngModel)]="formParams.params"
      />
    </nz-form-control>
  </nz-form-item>

  <nz-divider></nz-divider>

  <p class="goods-label-title">适用范围</p>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>状态</nz-form-label>
    <nz-form-control nzFlex="400px">
      <nz-radio-group
        [nzDisabled]="setDisabled('special')"
        [(ngModel)]="formParams.status">
        <label nz-radio [nzValue]="1">启用</label>
        <label nz-radio [nzValue]="2">禁用</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>生效时间</nz-form-label>
    <nz-form-control nzFlex="400px">
      <nz-range-picker
        [nzShowTime]="true"
        [nzShowTime]="{ nzFormat: 'HH:mm' }"
        nzFormat="yyyy-MM-dd HH:mm"
        [(ngModel)]="takeEffectDates"
        [nzDisabled]="setDisabled('special')"
        (ngModelChange)="dateChange($event, ['getBeginTime', 'getEndTime'])"
      ></nz-range-picker>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>适用用户</nz-form-label>
    <nz-form-control nzFlex="400px">
      <nz-radio-group
        [nzDisabled]="setDisabled('special')"
        [(ngModel)]="formParams.userType">
        <label nz-radio [nzValue]="0">通用</label>
        <label nz-radio [nzValue]="1">C端</label>
        <label nz-radio [nzValue]="2">B端</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>适用场景</nz-form-label>
    <nz-form-control nzFlex="400px">
      <zdy-checkbox-group
        *ngIf="sceneOptions.length"
        [checkOptions]="sceneOptions"
        [checkKeys]="{
          key: 'value',
          label: 'label'
        }"
        [isAllCheck]="false"
        [(ngModel)]="sceneSelected"
      ></zdy-checkbox-group>
    </nz-form-control>
  </nz-form-item>

  <nz-divider></nz-divider>

  <p class="goods-label-title">适用商品</p>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>指定分类</nz-form-label>
    <nz-form-control nzFlex="1">
      <div class="appoint-label">
        <label
          nz-checkbox
          [(ngModel)]="classifyAll"
          [nzDisabled]="classifyBrandNotAll || setDisabled('special')"
          (ngModelChange)="classifyAllChange($event)"
        >全选</label>

        <label
          nz-checkbox
          [(ngModel)]="classifyBrandNotAll"
          [nzDisabled]="setDisabled('special')"
          (ngModelChange)="classifyNotAllChange($event)"
        >全不选</label>
      </div>

      <div class="classify-tree-wrap" *ngFor="let item of classifyTreeDatas">
        <label class="classify-tree-label">{{ item.name }}</label>
        <div class="classify-tree-control">
          <nz-checkbox-group
            [(ngModel)]="item.children"
            [nzDisabled]="classifyBrandNotAll || setDisabled('special')"
            (ngModelChange)="updateSingleChecked()"
          ></nz-checkbox-group>
        </div>
      </div>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>指定品牌</nz-form-label>
    <nz-form-control nzFlex="1">
      <div class="appoint-label">
        <label
          nz-checkbox
          [(ngModel)]="brandAll"
          [nzDisabled]="classifyBrandNotAll || setDisabled('special')"
          (ngModelChange)="brandAllChange($event)"
        >全选</label>

        <label
          nz-checkbox
          [(ngModel)]="classifyBrandNotAll"
          [nzDisabled]="setDisabled('special')"
          (ngModelChange)="classifyNotAllChange($event)"
        >全不选</label>
      </div>

      <zdy-checkbox-group
        *ngIf="brandOptions.length"
        [checkOptions]="brandOptions"
        [checkKeys]="{
          key: 'id',
          label: 'name'
        }"
        [isAllCheck]="false"
        [disabled]="classifyBrandNotAll || setDisabled('special')"
        [(ngModel)]="brandSelected"
        (singCheckedChange)="brandSingCheckedChange()"
      ></zdy-checkbox-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth">追加可用商品</nz-form-label>
    <nz-form-control nzFlex="400px">
      <span class="p-r-8">
        已选 <b style="color: #F56C6C;">{{ appendGoodIds.length || 0 }}</b> 个商品
      </span>

      <button
        nz-button
        nzType="link"
        nzSize="small"
        [disabled]="!appendGoodIds.length"
        (click)="showSelectedGoodModal(1)"
      >查看</button>

      <button
        nz-button
        nzType="link"
        nzSize="small"
        [disabled]="setDisabled('special')"
        (click)="showGoodsMoreModal(1, excludeGoodIds)"
      >选择更多</button>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth">排除可用商品</nz-form-label>
    <nz-form-control nzFlex="400px">
      <span class="p-r-8">
        已选 <b style="color: #F56C6C;">{{ excludeGoodIds.length || 0 }}</b> 个商品
      </span>
      
      <button
        nz-button
        nzType="link"
        nzSize="small"
        [disabled]="!excludeGoodIds.length"
        (click)="showSelectedGoodModal(2)"
      >查看</button>

      <button
        nz-button
        nzType="link"
        nzSize="small"
        [disabled]="setDisabled('special')"
        (click)="showGoodsMoreModal(2, appendGoodIds)"
      >选择更多</button>
    </nz-form-control>
  </nz-form-item>
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center">
    <button
      *ngIf="permission.userPermission.has('goods:goodsLabel:preserve')"
      nz-button
      nzType="primary"
      class="m-r-10"
      (click)="submitForm()"
    >保存</button>

    <button
      nz-button
      nzType="default"
      (click)="back()"
    >返回</button>
  </div>
</nz-card>

<!-- S 选择商品 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="1000"
  [nzFooter]="null"
  [(nzVisible)]="selectGoodVisible"
  [nzTitle]="'选择商品'"
  (nzOnCancel)="selectGoodVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="good-search-wrap">
        <input
          style="width: 220px;"
          nz-input
          placeholder="请输入商品编号或名称"
          [(ngModel)]="selectGoodTable.name"
        />

        <button
          nz-button
          nzType="primary"
          class="m-l-10"
          (click)="queryGoodsData()"
        >查询</button>

        <button
          nz-button
          nzType="default"
          class="m-l-10"
          (click)="resetGoodsData()"
        >重置</button>

        <button
          nz-button
          nzType="primary"
          class="m-l-20"
          (click)="subRelationGood()"
        >关联已选商品{{ setOfCheckedId.size }}</button>
      </div>

      <div class="p-t-10">
        <nz-table
          #goodsTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="selectGoodTable.loading"
          [nzData]="selectGoodTable.tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="selectGoodTable.total"
          [nzPageIndex]="selectGoodTable.page"
          [nzPageSize]="selectGoodTable.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
          (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
        >
          <thead>
            <tr>
              <th
                [(nzChecked)]="checked"
                [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="onAllChecked($event)"
              ></th>
              <th nzAlign="center">ID</th>
              <th nzAlign="center">商品</th>
              <th nzAlign="center">销量</th>
              <th nzAlign="center">销售库存</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of goodsTable.data; let index = index;">
              <td
                [nzDisabled]="disabledCheckId.includes(data.id)"
                [nzChecked]="setOfCheckedId.has(data.id)"
                (nzCheckedChange)="onItemChecked(data.id, $event)"
              ></td>
              <!-- ID -->
              <td nzAlign="center">{{ data.id }}</td>
              <!-- 商品 -->
              <td nzAlign="center">{{ data.name || '-' }}</td>
              <!-- 销量 -->
              <td nzAlign="center">{{ data.salesVolume || '0' }}</td>
              <!-- 销售库存 -->
              <td nzAlign="center">{{ data.stockNum || '0' }}</td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 选择商品 Modal -->

<!-- S 查看商品 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="1000"
  [nzFooter]="null"
  [(nzVisible)]="lookGoodsVisible"
  [nzTitle]="'查看商品'"
  (nzOnCancel)="lookGoodsVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="p-t-10">
        <nz-table
          #goodsLookTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="lookGoodsTable.loading"
          [nzData]="lookGoodsTable.tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="lookGoodsTable.total"
          [nzPageIndex]="lookGoodsTable.page"
          [nzPageSize]="lookGoodsTable.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChangeTwo($event)"
          (nzPageSizeChange)="onPageSizeChangeTwo($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center">ID</th>
              <th nzAlign="center">商品</th>
              <th nzAlign="center">销量</th>
              <th nzAlign="center">销售库存</th>
              <th nzAlign="center">操作</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of goodsLookTable.data; let index = index;">
              <!-- ID -->
              <td nzAlign="center">{{ data.id }}</td>
              <!-- 商品 -->
              <td nzAlign="center">{{ data.name || '-' }}</td>
              <!-- 销量 -->
              <td nzAlign="center">{{ data.salesVolume || '0' }}</td>
              <!-- 销售库存 -->
              <td nzAlign="center">{{ data.stockNum || '0' }}</td>
              <!-- 操作 -->
              <td nzAlign="center">
                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  nzDanger
                  [disabled]="setDisabled('special')"
                  (click)="deleteGoodItem(data)"
                >删除</button>
              </td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 查看商品 Modal -->